var ProdCycleForm = function () {
  var template = /*html*/ `
    <div class="prod-cycle-form" v-loading="loading">
      <el-form v-model="prodCycle" ref="prodCycleFormRef" class="prodCycleForm" label-width="100px">
        <el-form-item label="供应商" prop="supplierId">
          <el-select filterable v-model="prodCycle.supplierId" class="form-input">
            <el-option v-for="supplier in suppliers" :key="'supplier_'+supplier.id" :value="supplier.id" :label="supplier.supplierName"></el-option>
          </el-select>
          <el-button type="primary" @click="addProCycle" v-if="type==='update'">添加周期</el-button>
          <el-button type="primary" @click="addSupplier" v-else>添加供应商</el-button>
        </el-form-item>
        <el-form-item label="加工工艺" prop="technology">
          <el-input class="form-input" v-model="prodCycle.technology"></el-input>
        </el-form-item>
        <el-form-item label="流程周期" prop="flowCycle">
          <el-input-number class="form-input" v-model="prodCycle.flowCycle" controls-position="right" :min="0" :precision="0"></el-input-number>
        </el-form-item>
        <el-form-item label="单价" prop="unitPrice">
          <el-input-number class="form-input" v-model="prodCycle.unitPrice" controls-position="right" :min="0" :max="99999999.99" :precision="2"></el-input-number>
        </el-form-item>
        
        <template v-if="type==='update'">
        <el-form-item label="状态" prop="status">
          <el-select v-model="prodCycle.status" class="form-input">
            <el-option v-for="state in statusList" :key="'status_'+state.value" :value="state.value" :label="state.label"></el-option>
          </el-select>
        </el-form-item>
        </template>
      </el-form>

      <div v-if="type==='create'" style="text-align:center;margin-bottom:20px;">
        <el-button type="primary" @click="ensure">确定</el-button>
      </div>

      <div v-if="prodCycle.id!==undefined&&type==='update'" style="text-align:center;margin-bottom:20px;">
        <el-button type="primary" @click="ensure">修改</el-button>
      </div>

      <el-dialog append-to-body title="添加外协供应商" :visible.sync="openAddSupplierDialog" :lock-scroll="true" :show-close="true" top="5vh" 
        custom-class="sysAddFormDialog">
        <div style="height: 70vh;overflow: auto;" v-if="openAddSupplierDialog">
          <supplier-form @save-success="addSupplierSuccess"></supplier-form>
        </div>
      </el-dialog>
    </div>
  `;

  return {
    props: {
      prodCycle: {
        type: Object,
        default: function () {
          return {};
        }
      },
      suppliers: {
        type: Array,
        default: function () {
          return [];
        }
      },
      type: {
        type: String,
        default: 'create'
      }
    },
    data: function () {
      return {
        loading: false,
        openAddSupplierDialog: false,
        moment: moment,
        SysUtil: SysUtil,
        statusList: [{
          value: 1,
          label: '使用'
        }, {
          value: 2,
          label: '禁用'
        }]
      };
    },
    methods: {
      addProCycle: function () {
        this.$emit('add-cycle');
      },

      addSupplier: function () {
        this.openAddSupplierDialog = true;
      },

      addSupplierSuccess: function () {
        this.openAddSupplierDialog = false;
        this.loading = true;
        var self = this;
        SysUtil.getSupplierDropDown().then(function (supplierList) {
          self.loading = false;
          self.$emit('update:suppliers', supplierList);
        }).catch(function () {
          self.loading = false;
        });
      },

      ensure: function () {
        var prodCycle = this.prodCycle;
        if (!this.checkValidate(prodCycle)) {
          return;
        }

        var type = this.type;
        if (type === 'create') {
          this.saveProdCycle();
        } else if (type === 'update') {
          this.updateProdCycle();
        }
      },

      saveProdCycle: function () {
        var prodCycle = this.prodCycle;
        var postData = {
          supplierId: prodCycle.supplierId,
          technology: prodCycle.technology,
          flowCycle: prodCycle.flowCycle,
          unitPrice: prodCycle.unitPrice
        };

        this.loading = true;
        var self = this;
        ajaxRequest('putOutNew/addPutoutFlowCycle', postData).then(function () {
          self.loading = false;
          self.$alert('添加外协周期成功', '信息');
          self.$emit('save-success');
        }).catch(function () {
          self.loading = false;
        });
      },

      updateProdCycle: function () {
        var prodCycle = this.prodCycle;
        var postData = {
          id: prodCycle.id,
          supplierId: prodCycle.supplierId,
          technology: prodCycle.technology,
          flowCycle: prodCycle.flowCycle,
          status: prodCycle.status,
          unitPrice: prodCycle.unitPrice
        };

        this.loading = true;
        var self = this;
        ajaxRequest('putOutNew/updatePutoutFlowCycle', postData).then(function () {
          self.loading = false;
          self.$alert('修改外协周期成功', '信息');
          self.$emit('save-success');
        }).catch(function () {
          self.loading = false;
        });
      },

      checkValidate: function (prodCycle) {
        var checkFields = ['supplierId', 'technology', 'flowCycle', 'unitPrice'];
        if (!CheckVaildUtil.checkNullValue(checkFields, prodCycle, this.getErrorMsg)) {
          return false;
        }
        return true;
      },

      getErrorMsg: function (code) {
        var errorObj = {
          supplierId: '请选择供应商',
          technology: '请输入加工工艺',
          flowCycle: '请输入流程周期',
          unitPrice: '请输入单价'
        };
        return errorObj[code];
      }
    },
    components: {
      SupplierForm: SupplierForm
    },
    template: template
  };
}();